<script setup lang="ts">
import { reactive } from 'vue'
import { columns, searchFormSchema } from './employee.data'
import DeptTree from './DeptTree.vue'
import { BasicTable, TableAction, useTable } from '@/components/Table'
import { employeeApi } from '@/api/sys/employeeApi'
import { IconEnum } from '@/enums/appEnum'
import { useModal } from '@/components/Modal'
import EmployeeModal from '@/views/sys/employee/EmployeeModal.vue'
import EmployeeRoleModal from '@/views/sys/employee/EmployeeRoleModal.vue'
import { EmployeeComponentCodes } from '@/enums/componentCodesEnum'
import { useUserStore } from '@/store/modules/employee'

defineOptions({ name: 'EmployeeList' })
const userStore = useUserStore()
const [registerModal, { openModal }] = useModal()
const [registerRoleModal, { openModal: openRoleModal }] = useModal()
const employeeQuery = reactive<Recordable>({})
const [registerTable, { reload }] = useTable({
  title: '用户列表',
  api: employeeApi.list,
  columns,
  formConfig: {
    labelWidth: 120,
    schemas: searchFormSchema,
    autoSubmitOnEnter: true,
  },
  useSearchForm: true,
  showTableSetting: true,
  showIndexColumn: false,
  actionColumn: {
    width: 140,
    title: '操作',
    dataIndex: 'action',
    fixed: 'right',
  },
})

function handleAdd() {
  openModal(true, { isUpdate: false })
}

function handleUpdate(record: Recordable) {
  openModal(true, { record, isUpdate: true })
}

async function handleToggleEnabled(record: Recordable) {
  await employeeApi.toggleEnabled({
    employeeId: record.employeeId,
    enabled: record.enabled,
  })
  reload()
}

function handleSelect(deptId = '') {
  employeeQuery.deptId = deptId
  reload()
}

function handleRole(record: Recordable) {
  openRoleModal(true, { record })
}

async function handleResetPwd(record: Recordable) {
  await employeeApi.resetPwd(record.employeeId)
  reload()
}
</script>

<template>
  <div class="flex">
    <DeptTree class="w-1/4 xl:w-1/5" @select="handleSelect" />
    <BasicTable class="w-3/4 xl:w-4/5" :search-info="employeeQuery" @register="registerTable">
      <template #toolbar>
        <a-button v-permission="EmployeeComponentCodes.Add" type="primary" :pre-icon="IconEnum.ADD" @click="handleAdd">
          新增
        </a-button>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction
            :actions="[
              {
                icon: IconEnum.EDIT,
                label: '更新',
                permission: EmployeeComponentCodes.Update,
                onClick: handleUpdate.bind(null, record),
              },
            ]"
            :drop-down-actions="[
              {
                icon: IconEnum.EDIT,
                label: '分配角色',
                permission: EmployeeComponentCodes.AssignRoles,
                onClick: handleRole.bind(null, record),
              },
              {
                icon: IconEnum.RESET,
                label: record.enabled ? '停用' : '启用',
                permission: EmployeeComponentCodes.Toggle,
                onClick: handleToggleEnabled.bind(null, record),
                ifShow: () => userStore.getUserInfo?.employeeId !== record.employeeId,
              },
              {
                icon: IconEnum.PASSWORD,
                danger: true,
                label: '重置密码',
                permission: EmployeeComponentCodes.ResetPwd,
                popConfirm: {
                  title: '确定?',
                  placement: 'left',
                  confirm: handleResetPwd.bind(null, record),
                },
                ifShow: () => userStore.getUserInfo?.employeeId !== record.employeeId,
              },
            ]"
          />
        </template>
      </template>
    </BasicTable>
    <EmployeeModal @register="registerModal" @success="reload()" />
    <EmployeeRoleModal @register="registerRoleModal" @success="reload()" />
  </div>
</template>
